<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			:root {
				--primary-color: #4a6bff;
				--hover-color: #f0f4ff;
				--border-radius: 12px;
				--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
				--shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
				--arc-size: 24px;
				--arc-glow: 0 0 8px rgba(74, 107, 255, 0.2);
			}

			body {
				font-family: 'Inter', sans-serif;
				background: linear-gradient(135deg, #f8f9fa 0%, #e6e8ea 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				padding: 20px;
				margin: 0;
			}

			.option-container {
				width: 100%;
				max-width: 600px;
				box-shadow: var(--shadow);
				border-radius: var(--border-radius);
				overflow: hidden;
				margin: 20px auto;
				background-color: white;
			}

			.option-item {
				padding: 20px 30px;
				color: #333;
				background: #fff;
				border-left: 4px solid transparent;
				transition: var(--transition);
				position: relative;
				z-index: 1;
				cursor: pointer;
			}

			.option-item:hover {
				background: var(--hover-color);
				transform: translateX(2px);
				box-shadow: var(--shadow);
			}

			.option-item.selected {
				background: #fff;
				border-left-color: var(--primary-color);
				box-shadow: var(--shadow) 0 4px 12px rgba(0, 0, 0, 0.1);
				position: relative;
				z-index: 2;
			}

			/* 高级圆弧效果 */
			.option-item.selected::before,
			.option-item.selected::after {
				content: '';
				position: absolute;
				width: var(--arc-size);
				height: var(--arc-size);
				background: radial-gradient(circle at 50% 50%, transparent calc(50% - 2px), var(--primary-color) calc(50% - 1px));
				border-radius: 50%;
				box-shadow: var(--arc-glow);
				transition: var(--transition);
			}

			/* 顶部圆弧 */
			.option-item.selected::before {
				top: -12px;
				right: -12px;
				transform: rotate(45deg);
			}

			/* 底部圆弧 */
			.option-item.selected::after {
				bottom: -12px;
				right: -12px;
				transform: rotate(135deg);
			}

			/* 首尾项特殊处理 */
			.option-item:first-child.selected::before {
				opacity: 0;
			}

			.option-item:last-child.selected::after {
				opacity: 0;
			}

			/* 动态高光效果 */
			.option-item.selected::after {
				animation: arc-glow 2s infinite alternate;
			}

			@keyframes arc-glow {
				from {
					box-shadow: 0 0 8px rgba(74, 107, 255, 0.2);
				}

				to {
					box-shadow: 0 0 12px rgba(74, 107, 255, 0.3);
				}
			}
		</style>
	</head>
	<body>
		<div class="option-container">
			<div class="option-item" onclick="selectOption(this)">
				<h3>西瓜/蜜瓜</h3>
				<p>新鲜当季水果</p>
			</div>
			<div class="option-item selected" onclick="selectOption(this)">
				<h3>鲜花/绿植</h3>
				<p>多种花卉选择</p>
			</div>
			<div class="option-item" onclick="selectOption(this)">
				<h3>桃李枣杏</h3>
				<p>传统水果精选</p>
			</div>
		</div>


		<script>
			function selectOption(element) {
				document.querySelectorAll('.option-item').forEach(item => {
					item.classList.remove('selected');
				});
				element.classList.add('selected');
			}
		</script>
	</body>
</html>
